<template>
  <div v-if="modelValue" class="modal-mask" @click.self="handleClose">
    <div class="modal-content">
      <!-- 标题和关闭按钮 -->
      <div class="modal-header">
        <h3>{{ title }}</h3>
        <span class="close-btn" @click="handleClose">×</span>
      </div>

      <!-- 内容区域 -->
      <div class="modal-body">
        <slot>
          <!-- 默认内容插槽 -->
          <p v-if="description" class="modal-description">{{ description }}</p>

          <!-- 时间选择区域 -->
          <div v-if="showTimeSelect" class="time-options">
            <button
              v-for="time in timeOptions"
              :key="time.value"
              :class="['time-btn', { active: selectedTime === time.value }]"
              @click="handleTimeSelect(time.value)"
            >
              {{ time.label }}
            </button>
          </div>

          <!-- 次数显示区域 -->
          <div v-if="showTrialInfo" class="trial-info">
            <p>
              <span v-if="props.type == 1">
                您还有全真模考
                <span class="highlight">{{ vipList[0].number }}</span> 次体验</span
              >
              <span v-if="props.type == 2">
                您还有还原真题
                <span class="highlight">{{ vipList[1].number }}</span> 次体验</span
              >
              <span v-if="props.type == 3">
                您还能兑换视频讲解
                <span class="highlight">{{ vipList[2].number }}</span> 次</span
              >
            </p>
            <p class="sub-text">{{ trialTip }}</p>
          </div>

          <!-- 价格展示区域 -->
          <div v-if="showPricing" class="pricing-section">
            <!-- <div class="product-info">
              <div class="product-title">
                购买{{ props.type == 3 ? "视频讲解" : "考试产品" }}
              </div>
              <div class="info-row" v-if="props.type == 1">
                <span>还原真题:</span>
                <span class="days-nums">{{ productInfo.trialDays }}天</span>
              </div>
              <div class="info-row" v-if="props.type == 2">
                <span>全真模考:</span>
                <span class="days-nums">{{ productInfo.examDays }}天</span>
              </div>
              <div class="info-row" v-if="props.type == 3">
                <span>视频讲解:</span>
                <span class="days-nums">{{ productInfo.examDays }}天</span>
              </div>
            </div> -->
            <!-- <div class="product-info-wrapper">
              <el-input
                :autosize="{ minRows: 4, maxRows: 5 }"
                type="textarea"
                placeholder="Please input"
              />
            </div> -->

            <div v-if="priceOptions.length" class="price-options">
              <div
                v-for="(price, index) in priceOptions"
                class="price-options-item"
                :key="index"
              >
                <div class="price-title">{{ price.typeName }}</div>
                <div class="price-box">
                  <div
                    @click="handleCurrentClick(price, v, i)"
                    :class="['price-item', v.active ? 'active' : '']"
                    v-for="(v, i) in price.list"
                    :key="i"
                  >
                    <div class="discount" v-if="v.ratio">{{ v.ratio }}</div>
                    <div class="price">{{ v.num }}</div>
                    <div class="period">
                      {{
                        (v.is_year == 1 && "/年") ||
                        (v.is_year == 2 && "/月") ||
                        (v.is_expir == 2 && "次")
                      }}
                    </div>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </slot>
      </div>

      <!-- 底部按钮区域 -->
      <div class="modal-footer">
        <slot name="footer">
          <div v-if="!showActionButtons" class="footer-item-header total-price">
            <div class="total-nums">¥ {{ activeItem.price }}</div>
            <button class="confirm-btn">去付款</button>
          </div>
          <div v-if="showActionButtons" class="action-buttons">
            <button class="trial-btn" @click="handleTrial">{{ trialButtonText }}</button>
            <button class="purchase-btn" @click="handlePurchase">
              {{ purchaseButtonText }}
            </button>
          </div>
        </slot>
      </div>
    </div>
  </div>
</template>

<script setup>
import { getQyList } from "@/service/exam.js";
import { useUserStore } from '@/stores/User.js'
const userStore = useUserStore()
const showPricing = ref(false);
const productInfo = ref({ trialDays: 10, examDays: 10 });
const activeItem = ref({});
const priceOptions = ref([]);
const showActionButtons = ref(true);

const vipList = computed(()=>{
  return userStore.personalDetailInfo.vipList
})

// 去购买
const handlePurchase = () => {
  // emit("purchase");
  // handleClose();

  showPricing.value = true;
  showActionButtons.value = false;
};

// 获取权益产品列表
const getQyListFn = async () => {
  const res = await getQyList({});
  if (res.code == "000000") {
    activeItem.value = res.data.filter((i) => i.type == props.type)[0].list[0];
    priceOptions.value = res.data
      .filter((i) => i.type == props.type)
      .map((i, index) => ({
        ...i,
        typeName: i.type == 1 ? "全真模考" : i.type == 2 ? "还原真题" : "视频讲解",
        list: i.list.map((l, ind) => ({ ...l, active: !index && !ind ? true : false })),
      }));
  }
};

// 点击购买项
const handleCurrentClick = (price, v, index) => {
  priceOptions.value.forEach((item) => item.list.forEach((i) => (i.active = false)));
  v.active = true;
  activeItem.value = v;
};

const props = defineProps({
  type: Number,
  modelValue: Boolean,
  title: String,
  description: String,
  showTimeSelect: Boolean,
  timeOptions: {
    type: Array,
    default: () => [
      { label: "不限时", value: 0 },
      { label: "20min", value: 20 },
      { label: "40min", value: 40 },
      { label: "80min", value: 80 },
      { label: "120min", value: 120 },
    ],
  },
  showTrialInfo: Boolean,
  trialCount: {
    type: Number,
    default: 0,
  },
  fullExamCount: {
    type: Number,
    default: 0,
  },
  showConfirmButtonOK: {
    type: Boolean,
    default: false,
  },
  trialTip: {
    type: String,
    default: "若需要持续使用，建议您购买相应产品服务",
  },
  // productInfo: {
  //   type: Object,
  //   default: null,
  // },
  // priceOptions: {
  //   type: Array,
  //   default: null,
  // },
  totalPrice: {
    type: String,
    default: "",
  },
  showConfirmButton: {
    type: Boolean,
    default: true,
  },
  confirmButtonText: {
    type: String,
    default: "确定",
  },
  // showActionButtons: {
  //   type: Boolean,
  //   default: false,
  // },
  trialButtonText: {
    type: String,
    default: "先体验模考",
  },
  purchaseButtonText: {
    type: String,
    default: "去购买",
  },
});

const currentId = ref(0);
const emit = defineEmits([
  "update:modelValue",
  "time-select",
  "confirm",
  "trial",
  "purchase",
  "close",
]);

const selectedTime = ref(null);
const handleClose = () => {
  showPricing.value = false;
  showActionButtons.value = true;
  emit("close");
};

const handleTimeSelect = (time) => {
  selectedTime.value = time;
  emit("time-select", time);
};

const handleConfirm = () => {
  emit("confirm", selectedTime.value);
  handleClose();
};

const handleTrial = () => {
  emit("trial");
  handleClose();
};

// const handlePurchase = () => {
//   // emit("purchase");
//   // handleClose();
// };

watch(
  () => props.modelValue,
  (val) => {
    if (val) {
      getQyListFn();
    } else {
    }
  },
  { immediate: true }
);
</script>

<style lang="scss" scoped>
.modal-mask {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: rgba(0, 0, 0, 0.5);
  display: flex;
  justify-content: center;
  align-items: center;
  z-index: 1000;
}

.modal-content {
  background-color: #fff;
  border-radius: 8px;
  width: 600px;
  // height: Hug (349px)px;
  // top: 146px;
  // left: 114px;
  padding: 20p;
  // gap: 40px;
  border-radius: 8pxx;
  opacity: 0px;
}

.modal-header {
  padding: 16px 20px;
  border-bottom: 1px solid #eee;
  display: flex;
  justify-content: center;
  align-items: center;

  position: relative;
  h3 {
    margin: 0;
    font-size: 18px;
  }

  .close-btn {
    position: absolute;
    right: 10px;
    top: 0px;
    cursor: pointer;
    font-size: 31px;
    color: #999;
  }
}

.modal-body {
  padding: 20px;
}

.modal-description {
  text-align: center;
  color: #666;
  margin-bottom: 20px;
}

.time-options {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-bottom: 20px;

  .time-btn {
    // padding: 8px 16px;
    border: 1px solid #ddd;
    border-radius: 4px;
    background: #fff;
    cursor: pointer;

    padding: 20px;
    gap: 10px;
    border-radius: 8px 0px 0px 0px;
    opacity: 0px;
    font-family: PingFang SC;
    font-size: 16px;
    font-weight: 600;
    line-height: 22px;
    text-align: left;
    text-underline-position: from-font;
    text-decoration-skip-ink: none;
    color: #333;
    border-radius: 8px;

    &.active {
      border-color: #126983;
      color: #126983;
      background-color: #f0fafc;
    }
  }
}

.trial-info {
  text-align: center;
  margin: 20px 0;
  font-family: PingFang SC;
  font-size: 16px;
  font-weight: 400;
  line-height: 22.4px;
  text-align: center;
  text-underline-position: from-font;
  text-decoration-skip-ink: none;

  .highlight {
    color: #e52121;
    font-weight: bold;
    font-size: 24px;
  }

  .sub-text {
    color: #333;
    // font-size: 14px;
  }
}

.pricing-section {
  padding-top: 20px;
  border-top: 1px solid #eee;

  .product-info {
    margin-bottom: 20px;
    display: flex;
    align-items: center;
    .product-title {
      font-family: PingFang SC;
      font-weight: 600;
      font-size: 18px;
      line-height: 25.2px;
      letter-spacing: 0%;
      color: #333;
      margin-right: 10px;
    }
  }

  .info-row {
    display: flex;
    justify-content: space-between;
    margin-right: 10px;
    font-family: PingFang SC;
    font-weight: 400;
    font-size: 12px;
    line-height: 16.8px;
    letter-spacing: 0%;
    color: #333;

    .days-nums {
      color: #e52121;
      font-weight: 600;
      padding-left: 5px;
    }
  }

  .price-options {
    // display: flex;
    // justify-content: space-between;
    // margin-bottom: 20px;
    .price-options-item {
      display: flex;
      flex-direction: column;
      flex-wrap: wrap;
      .price-item {
        width: 105.5999984741211px;
        cursor: pointer;
        height: 40px;
        border-radius: 8px;
        border-width: 1px;
        padding: 10px;
        border: 1px solid #eee;
        display: flex;
        align-items: center;
        justify-content: center;
        margin: 10px 0px;
      }
      .price-box {
        display: flex;
        gap: 8px;
      }
      .price-title {
        font-family: PingFang SC;
        font-weight: 600;
        font-size: 18px;
        line-height: 25.2px;
        letter-spacing: 0%;

        color: #333;
      }
    }
  }

  .price-item {
    text-align: center;
    position: relative;
    color: #333;
    .discount {
      position: absolute;
      top: -10px;
      right: -10px;
      background: #ff4d4f;
      color: white;
      padding: 2px 6px;
      border-radius: 10px;
      font-size: 12px;
    }

    .price {
      font-size: 14px;
      font-weight: bold;
    }

    .period {
      color: #333;
      font-size: 14px;
      font-weight: 600;
    }
  }
}
.total-price {
  text-align: right;
  font-family: PingFang SC;
  font-weight: 400;
  font-size: 14px;
  line-height: 22px;
  letter-spacing: 0px;
  text-align: center;
  display: flex;
  align-items: center;
  color: #333;
  // font-size: 20px;
  .total-nums {
    font-family: PingFang SC;
    font-weight: 600;
    font-size: 24px;
    line-height: 22px;
    letter-spacing: 0px;
    text-align: center;
    color: #ff4d4f;
  }
}
.modal-footer {
  padding: 16px 20px;
  border-top: 1px solid #eee;
  text-align: center;

  .confirm-btn {
    // background-color: #40a9ff;
    color: white;
    border: none;
    padding: 8px 16px;
    width: 120px;
    background-color: #126983;
    border-radius: 4px;
    cursor: pointer;
  }

  .action-buttons {
    display: flex;
    justify-content: center;
    gap: 16px;

    button {
      padding: 8px 16px;
      border-radius: 4px;
      cursor: pointer;
      width: 130px;
    }

    .trial-btn {
      border: 1px solid #126983;
      color: #126983;
      background: #fff;
    }

    .purchase-btn {
      background: #126983;
      color: #fff;
      border: none;
    }
  }
}
.product-info-wrapper {
  width: 100%;
  margin-bottom: 20px;
  border: 1px solid #eeeeee;
}
.footer-item-header {
  display: flex;
  justify-content: space-between;
}
.active {
  border: 1px solid #126983 !important;
}
</style>
